<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page errorPage="Error.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<title>上传头像</title>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<link rel="stylesheet" href="css/pintuer.css">
	<link rel="stylesheet" href="css/admin.css">
	<script src="/js/pintuer.js"></script>
	<style>
		#imgOne{

		}
	</style>
</head>
<body>

	<div class="panel admin-panel">
		<div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>上传头像</strong></div>
		<div class="body-content" style="width: 100%;" >
			<div style="margin:0 auto;width:300px;">
				<form method="post" class="form-x" enctype="multipart/form-data" action="/Acm/up_head_image" >
					<input type="file" name="imagefile"  id="imgOne" onchange="preImg(this.id,'imgPre');" style="width: 100%;border: 1px solid royalblue;color: red;" />
					<img id="imgPre" src="" width="300px" height="300px" style="display: block;" />

					<div class="form-group">
						<div class="label">
							<label></label>
						</div>
						<div class="field" style="margin-left: 100px;">
							<button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(".bg-main").click(function () {
		var value = $("#imgOne").attr("value");
		if(value==""){
			alert("请先选择需要上传的图片");
			return false;
		}
	});

	/**
	 * 从 file 域获取 本地图片 url
	 */
	function getFileUrl(sourceId) {
		var url;
		if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
			url = document.getElementById(sourceId).value;
		} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
			url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
		} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
			url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
		}
		return url;
	}

	/**
	 * 将本地图片 显示到浏览器上
	 */
	function preImg(sourceId, targetId) {
		var url = getFileUrl(sourceId);
		var imgPre = document.getElementById(targetId);
		imgPre.src = url;
	}
</script>
</html>

